<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ include file="../session.jsp"%>
<!DOCTYPE html>
<html lang="ko">
  <head>
  	<%@ include file="../head.jsp"%>
  	<script src="resources/js/jquery.js"></script>
	<script src="resources/js/bootstrap.min.js"></script>
  </head>
  <body>
  	<%@ include file="../menu.jsp"%>
	<div class="container">
		<div class="page-header">
			<h2>팀수정</h2>
		</div>

		<form id="editTeam" class="form-horizontal" role="form" method="post" action="editTeamOk" enctype="multipart/form-data">
			<fieldset>
			
				<input type="hidden" name="idTeam" value="${item.idTeam}" />
				<input type="hidden" name="image" value="${item.idImage}" />
				<input type="hidden" name="page" value="${page}" />
				<input type="hidden" name="where" value="${where}" />
			
				<div class="form-group">
					<label for="isDisplay" class="col-md-2 control-label">전시여부</label>
					<div class="col-md-10">
						<label class="radio-inline">
							<input type="radio" name="isDisplay" value="1" <c:if test="${item.isDisplay == 1}">checked</c:if>> 활성
						</label>
						<label class="radio-inline">
							<input type="radio" name="isDisplay" value="0" <c:if test="${item.isDisplay == 0}">checked</c:if>> 비활성
						</label>
					</div>
				</div>

				<div class="form-group">
					<label class="col-md-2 control-label">팀번호</label>
					<div class="col-md-10">
						<p class="form-control-static">${item.idTeam}</p>
					</div>
				</div>
			
				<div class="form-group">
					<label for="teamName" class="col-md-2 control-label">팀이름</label>
					<div class="col-md-10">
						<input type="text" class="form-control" name="teamName" value="${item.teamName}" placeholder="팀이름을 입력하세요" />
					</div>
				</div>

				<div class="form-group">
					<label for="teamNameSimple" class="col-md-2 control-label">팀명요약 (최대6글자)</label>
					<div class="col-md-10">
						<input type="text" class="form-control" name="teamNameSimple" value="${item.teamNameSimple}" placeholder="팀명요약을 입력하세요" />
					</div>
				</div>
				
				<div class="form-group">
					<label for="league" class="col-md-2 control-label">리그</label>
					<div class="col-md-10">
						<div class="row">
							<div class="col-md-6">
								<select class="form-control" name="sport">
									<option value="default">- 종목 -</option>
									<c:forEach items="${sportList}" var="sportList">
										<option value="${sportList.idSport}" <c:if test="${sportList.sportName == item.sportName}">selected</c:if>>${sportList.sportName}</option>
									</c:forEach>
								</select>
							</div>
							<div class="col-md-6">
								<select class="form-control" name="league">
									<option value="default">- 종목을 먼저 선택하여 주세요 -</option>
								</select>
							</div>
						</div>
					</div>
				</div>
				
				<div class="form-group">
					<label for="idImage" class="col-md-2 control-label">엠블럼</label>
					<div class="col-md-10">
						<div class="row">
							<div class="col-md-4">
								<p class="form-control-static">
									<img src="download?${item.finfo}" class="img-thumbnail img-responsive"/>
								</p>
							</div>
							<div class="col-md-8">
								<br/>
								<ul>
									<li>항번: ${item.finfo.idImage}</li>
									<li>원본 파일 이름: ${item.finfo.fileOrgName}</li>
									<li>파일 크기: ${item.finfo.fileSize}byte</li>
									<li>업로드된 파일 이름: ${item.finfo.fileSaveName}</li>
									<li>업로드된 폴더 경로: ${item.finfo.fileDir}</li>
									<li>파일 타입: ${item.finfo.fileType}</li>
								</ul>
								&nbsp;&nbsp;&nbsp;&nbsp;
								<button type="button" class="btn btn-sm" id="imgEdit">변경</button>
								<br/><br/>
								<div id="imgDiv"><input type="file" class="form-control" name="idImage"/></div>
							</div>
						</div>
						
					</div>
				</div>

				<div class="form-group">
					<div class="col-md-offset-2 col-md-10">
						<div class="row">
							<div class="col-md-6">
								<button type="submit" class="btn btn-primary btn-block">수정하기</button>
							</div>
							<div class="col-md-6">
								<button type="reset" class="btn btn-warning btn-block">다시작성</button>
							</div>
						</div>

					</div>
				</div>
			</fieldset>
		</form>
	</div>
	
	<script type="text/javascript">
		$(function() {
			
			if ($("select[name='sport'] > option:selected").index() > 0) {
				$("select[name='league']").empty();
				
				var sport = $(this).find("option:selected").val();
				
				$.ajax({
					url: "league",
					data: "sport=" + sport,
					dataType: "xml",
					timeout: 30000,
					cache: false,
					async: false,
					success: function(req) {
						$(req).find("item").each(function() {
							var idLeague = $(this).find("idLeague").text();
							var leagueName = $(this).find("leagueName").text();
							
							var option = $("<option>").html(leagueName);
							option.attr({'value' : idLeague});
							
							if (leagueName == "${item.idLeagueValue}") {
								option.attr({'selected' : "selected"});
							}
							
							$("select[name='league']").append(option);
						});
					},
					error: function(xhr, status, error) {
						alert("status: " + status + " / error-code: " + xhr.status + " " + error);
					}
				});
			}
			
			$("select[name='sport']").change(function() {
				$("select[name='league']").empty();
				
				var sport = $(this).find("option:selected").val();
				
				$.ajax({
					url: "league",
					data: "sport=" + sport,
					dataType: "xml",
					timeout: 30000,
					cache: false,
					async: false,
					success: function(req) {
						$(req).find("item").each(function() {
							var idLeague = $(this).find("idLeague").text();
							var leagueName = $(this).find("leagueName").text();
							
							var option = $("<option>").html(leagueName);
							option.attr({'value' : idLeague});
							
							$("select[name='league']").append(option);
						});
					},
					error: function(xhr, status, error) {
						alert("status: " + status + " / error-code: " + xhr.status + " " + error);
					}
				});
			});
			
			$("#imgDiv").hide();
			
			$("#imgEdit").click(function() {
				$("input[name='idImage']").replaceWith($("input[name='idImage']").clone(true));
				$("#imgDiv").toggle();
			});
		});
	</script>
	
	<!-- 형식검사 클래스 참조 -->
	<script src="resources/js/string.js"></script>
	<script type="text/javascript">
		$(function() {
			$("#editTeam").submit(function() {
				
				if (!$("input[name='isDisplay']").is(":checked")) {
					alert("전시여부를 선택해 주세요");
					$("input[name='isDisplay']").focus();
					return false;
				}
				
				if (!$("input[name='teamName']").val().isValue()) {
					alert("팀명을 입력하세요.");
					$("input[name='teamName']").focus();
					return false;
				}
				
				if (!$("input[name='teamNameSimple']").val().isValue()) {
					alert("팀명요약을 입력하세요.");
					$("input[name='teamNameSimple']").focus();
					return false;
				}
				
				if ($("input[name='teamNameSimple']").val().length > 6) {
					alert("팀명요약은 최대 6글자까지만 입력이 가능합니다.");
					$("input[name='teamNameSimple']").focus();
					return false;
				}
				
				if ($("select[name='league'] > option:selected").index() < 1) {
					alert("리그를 선택하세요.");
					$("select[name='league']").focus();
					return false;
				}
				
				if (!confirm("정말 수정 하시겠습니까?")) {
					return false;
				}
			});
		});
	</script>
  </body>
</html>